/* NumberSpinner */

/* the namespace is ".sketch .dijitSpinner" */

.sketch .dijitSpinnerButtonContainer {
	overflow: hidden;
	position: relative;
	height: 100%;
	width: auto;
	padding: 0 2px;
}

/* button */
.sketch .dijitSpinner .dijitArrowButton {
	height: 49%;
	width:auto;
	background-color: #ebeef4;
	background-image: url("images/formHighlight.png");
	background-position:0px 0px;
	background-repeat:repeat-x;
	overflow: hidden;
}

.sketch .dijitSpinner .dijitSpinnerButtonInner {
	width: 15px;
}
/* up & down button icons */
.sketch .dijitSpinner .dijitArrowButtonInner {
	border:solid 1px #fff;
	background-image: url("images/commonFormArrows.png");
	background-repeat: no-repeat;
	height: 100%;
	width:15px;
	padding-left: 1px;
	padding-right: 1px;

	/* for up arrow */
	background-position:-139px center;

	/* override button.css (TODO: move to Common.css since ComboBox needs this too) */
	display: block;
	margin: -1px 0px -1px 0px;	/* compensate for inner border */
}
.sketch .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
	background-position:-34px;
}
.sketch .dijitSpinner .dijitArrowButtonInner .dijitInputField {
	padding: 0;
}

/** hover & focused status **/

.sketch .dijitUpArrowButtonActive,
.sketch .dijitDownArrowButtonActive {
	background-color:#abd6ff;
}

.sketch .dijitSpinner .dijitUpArrowButtonHover,
.sketch .dijitSpinner .dijitDownArrowButtonHover,
.sketch .dijitSpinnerFocused .dijitArrowButton {
	background-color: #a0d1ff;
}

.sketch .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner {
	background-position:-174px;
}
.sketch .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner {
	background-position:-69px;
}

.sketch .dijitSpinnerFocused {
	background-color: #fff;
	background-image: none;
}

/* mouse down status */
.sketch .dijitSpinner .dijitDownArrowButtonActive,
.sketch .dijitSpinner .dijitUpArrowButtonActive {
	background-color: #3299f9;
	background-position:0px -177px;
}
.sketch .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner,
.sketch .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
	/* hide inner border while button is depressed */
	border: 0px;
	padding: 1px;
	margin:-1px 1px 1px 0px;
}
.sketch .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner {
	background-position:-173px;
}
.sketch .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
	background-position:-68px;
}

/* disabled */

.sketch .dijitSpinnerDisabled .dijitArrowButtonInner {
	background-color: #f1f1f1;
}
.sketch .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner {
	background-position:-104px;
}
.sketch .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner {
	background-position:1px;
}

/** hacks for browsers **/

/* for IE 7, when div is enlarged, 
 * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/
.dj_ie7 .sketch .dijitSpinner {
	overflow:visible;
} 